{% extends "appbuilder/general/model/show.html" %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <a href="{{ url_for('TrainModelView.list') }}" class="btn btn-default">
            <i class="fa fa-arrow-left"></i> 返回模型管理
        </a>
    </div>
</div>
{{ super() }}
{% endblock %}

<!-- 添加依赖关系可视化标签页 -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">模型依赖关系图</h3>
    </div>
    <div class="panel-body">
        <div id="model-dependency-graph" data-model-id="{{ pk }}"></div>
    </div>
</div>

<script>
// 加载依赖关系图
$(document).ready(function() {
    const modelId = $('#model-dependency-graph').data('model-id');
    
    // 使用现有的前端框架加载React组件
    if (window.React && window.ReactDOM) {
        const element = React.createElement(ModelDependencyGraph, { modelId: modelId });
        ReactDOM.render(element, document.getElementById('model-dependency-graph'));
    } else {
        // 降级方案：使用纯D3.js实现
        loadDependencyGraphWithD3(modelId);
    }
});

function loadDependencyGraphWithD3(modelId) {
    fetch(`/model_visualization/api/dependency_graph/${modelId}`)
        .then(response => response.json())
        .then(data => {
            // 使用现有的D3工具类渲染图形
            const container = document.getElementById('model-dependency-graph');
            container.innerHTML = '<svg id="dependency-svg" width="800" height="600"></svg>';
            
            // 调用现有的图形渲染逻辑
            renderDependencyGraph(data.data, '#dependency-svg');
        })
        .catch(error => console.error('加载依赖关系图失败:', error));
}
</script>
{% endblock %}